<template>
    <section class="make-content" v-loading.fullscreen="detailLoading">
        <el-tabs v-model="activeTabName" type="card">
            <el-tab-pane v-if="user.roleCode === 'CITY_LEADER'" label="市级指标制定" name="市级指标制定">
                <span slot="label">市级指标制定</span>
                 <!-- <NewIndexMake :releaseType="'考核指标内容制定'" > </NewIndexMake> -->
              <FormulationOfAssessmentIndicators :releaseType="'考核指标内容制定'" > </FormulationOfAssessmentIndicators>
            </el-tab-pane>
            <el-tab-pane v-if="user.roleCode === 'TOWN_REVIEWER'" lasebel="镇级指标确认" name="镇级指标确认">
                <span slot="label">镇级指标确认</span>
                <div  v-if="activeTabName == '镇级指标确认'">
                    <IndexMake> </IndexMake>
                </div>
            </el-tab-pane>
            <el-tab-pane v-if="user.roleCode.indexOf('DEPART') !== -1" label="部门指标确认" name="部门指标确认">
                <span slot="label"><i class="el-icon-s-custom"></i> 部门指标确认</span>
                <IndexMake> </IndexMake>
            </el-tab-pane>
            <!-- <el-tab-pane v-if="user.roleCode === 'CITY_LEADER'" label="指标审核" name="指标审核">
                <span slot="label">指标审核</span>
                <div v-if="activeTabName == '指标审核'">
                    <PendingTask  :taskTypes="['考核指标内容制定']" :taskIndex="taskIndex" @getCurrentTask="(data) => { if (data) { this.isHasTask = true; this.currentTask = data;}}" @getTaskIndex="getTaskIndex" @getCurrentTaskDetail="getCurrentTaskDetail">
                        <template slot-scope="props">
                            <div :key="props.index"  v-if="props.index === taskIndex">
                                <ReviewContent v-if="isHasTask" :currentTask="currentTask" @refreshConfirmList="handleConfirmList" :isHasTask="isHasTask"></ReviewContent>
                            </div>
                        </template>
                    </PendingTask>
                </div>
            </el-tab-pane> -->
            <el-tab-pane v-if="user.roleCode.indexOf('DEPART') == -1" label="
            指标全图" name="指标全图">
                <span slot="label">指标全图</span>
                <div v-if="activeTabName=='指标全图'">
                    <AllIndex></AllIndex>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog
            :visible.sync = "reviewVis"
            width="500px"
            title="审核"
            :append-to-body="true"
        >
            <el-form v-model="reviewForm" ref="reviewForm">
                <el-form-item label="审核人" prop="auditor">
                    <el-input v-model="reviewForm.auditor"></el-input>
                </el-form-item>
                <el-form-item label="审核意见" prop="auditAdvice">
                    <el-input v-model="reviewForm.auditAdvice" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-button type="primary" @click="reviewConfirm">确认</el-button>
                <el-button  @click="() => {this.reviewForm = {};this.reviewVis = false}">取消</el-button>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
    import ReviewContent from "./ReviewContent";
    import IndexMake from "@/components/IndexMake";
    import FormulationOfAssessmentIndicators from "./FormulationOfAssessmentIndicators";
    import PendingTask from "@/components/PendingTask";
    import IndexConfirm from "@/components/IndexConfirm";
    import AllIndex from "@/components/AllIndex";
    // import newIndexMake  from "./newIndexMake";
    import TownIndex from "./TownIndex";
    export default {
        name: "MakeContent",
        data() {
            return {
                isHasTask: false,
                endTime: '',
                isEdit: false,
                currentTask: {},
                currentTaskObject: {},
                user: {},
                currentTown: {},
                reviewVis: false,
                reviewForm: {},
                isReviewed: false,
                detailLoading: false,
                allLoading: false,
                timer: 0,
                activeTabName: '',
                isRefreshing: false,
                taskIndex: -1,
            }
        },
        components: {
            TownIndex,
            ReviewContent,
            IndexMake,
            FormulationOfAssessmentIndicators,
            PendingTask,
            IndexConfirm,
            AllIndex,
            // NewIndexMake
        },
        methods: {
            reviewConfirm() {
                this.$http("GET", `/identity/cadreTaskObject/progressNext?taskObjectId=${this.currentTaskObject.id}&isSuccess=SUCCESS&auditor=${this.reviewForm.auditor}&auditAdvice=${this.reviewForm.auditAdvice}`,
                    false).then(data => {
                        this.reviewVis = false;
                        this.currentTaskObject = data;
                        this.$message({
                            type: 'SUCCESS',
                            message: "审核成功"
                        });
                });
            },
            updateData(value) {
                this.allLoading = true;
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.allLoading = false;
                    }, 500)
                })
            },
            getCurrentTaskDetail(data) {
                data.forEach(item => {
                    if (item.objectId === this.user.districtId) {
                        this.currentTaskObject = item;
                    }
                })
            },
            getTaskIndex(taskIndex) {
                this.taskIndex = taskIndex;

            },
            handleConfirmList() {
                this.isRefreshing = true;
                this.$nextTick(_ => {
                    setTimeout(_ => {
                        this.isRefreshing = false;
                    }, 500);
                })
            }
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            if (this.user.roleCode === 'CITY_LEADER') {
                this.activeTabName = '市级指标制定';
            } else if (this.user.roleCode === 'TOWN_REVIEWER'){
                this.activeTabName = '镇级指标确认';
            }else if(this.user.roleCode.indexOf('DEPART') !== -1){
                this.activeTabName = '部门指标确认';
            }
        },
        // beforeDestroy() {
        //     clearInterval(this.timer);
        // }
    }
</script>

<style>
    .make-content {
        margin:0 10px;
    }
    .make-content .tableBgC{
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        border-radius: 10px;
        height: 60px;
        font-weight: bold;
        font-size: 20px;
        color: rgba(255, 255, 255, .9);
        text-align: center;
        line-height: 60px;
        justify-content: center;
        display: inline-block;
    }
    .task-tip {
        text-align: left;
        color: #409EFF;
        font-size: 16px;
        margin-bottom: 10px;
        right: 100px;
        top: -45px;
        position: absolute;
        right: 20px;
    }
    .make-content .el-tabs__content {
        overflow: visible;
    }
    .make-content .vs-switch--circle {
        width: 24px;
        height: 24px;
        top: 3px;
        left: 2px;
    }
    .make-content .vs-switch.vs-switch-active .vs-switch--circle {
        margin-left: calc(100% - 30px);
    }
    .make-content .vs-switch-success {
        width: 70px !important;
        height: 30px !important;
    }
    .make-content .vs-switch--text {
        font-size: 16px !important;
    }
    .make-content .edit-switch {
        float: right;
        top: -30px;
        left: 80px;
        position: relative;
    }
    .make-content .vs-switch {
        border-radius: 15px;
    }
    .make-content .el-tabs--card>.el-tabs__header{
        border: none;
        background:linear-gradient(to right,#64a9b3,#45a04e) ;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }
    .make-content .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
        border: 0px solid transparent !important;
        line-height: 35px;
        height: 35px;
        color: #69AD9C;
        background: #fff!important;
        margin-top: 3px;
    }
    .make-content .el-tabs__item{
        height: 35px;
        line-height: 35px;
        margin: 3px 0px -1px 0px;
        color: #FFFFFF;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border: 0px solid transparent !important;
        background: transparent!important;
    }
    .make-content .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
        margin-left: 3px;
    }
</style>
